<template>
    <div class="heat-container">
        <!-- 加载中 -->
        <loading :isLoading="loading" />

        <div class="query-body">
            <!-- 搜索框 -->
            <div class="top" style="display: flex;align-items: center;height: 60px;">
                景点类型： <el-select v-model="value" placeholder="默认全部">
                    <!-- 遍历景点类型 -->
                    <el-option v-for="item in options" :key="item.categoryId" :label="item.categoryName"
                        :value="item.categoryId">
                    </el-option>
                </el-select>
                <el-button style="margin-left: 20px;" type="primary" plain @click="change()">搜索</el-button>
                <div class="search" style="margin-left: 50px;">
                    <input
                        style="height: 30px;border: 2px rgb(141, 139, 139) solid;border-radius: 5px;outline: none;padding-left: 10px;margin-right: 20px;"
                        type="text" v-model="address" placeholder="搜索景点地址">
                    <el-button type="primary" plain @click="search()">搜索</el-button>
                </div>
            </div>
            <!-- 景点列表 -->
            <div class="content">
                <card @toDetail="_toDetail(item)" v-for="item, index in attractionList" :key="index"
                    :image="item.imgList[0] ? base_url + item.imgList[0].attractionPhoto : ''"
                    :title="item.attractionName" :city="item.city" :address="item.address" :price="item.price"
                    :openTime="item.openTime" :id="item.attractionId"></card>
            </div>
            <!-- 分页器 -->
            <div class="pager" style="display: flex;justify-content: center;">
                <el-pagination background layout="prev, pager, next,sizes" :page-sizes="pageSizes" :total="total"
                    :current-page="query.pageNum" @current-change="changePage" @size-change="sizeChange"
                    :page-size="query.pageSize">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import card from '../../layout/components/card.vue';
import { getCategory } from '../../api/system/category';
import { listAttraction, listAttractionImage, getAttraction } from '../../api/system/attraction';
import loading from '../../layout/components/loading.vue';

export default {
    components: {
        loading,
        card
    },
    data() {
        return {
            base_url: process.env.VUE_APP_BASE_API,
            options: [],
            value: null,
            address: '',
            query: {
                pageNum: 1,
                pageSize: 10,
                status: 2,
                categoryId: 0,
                address: null
            },
            attractionList: [],
            loading: false,
            total: 0,
            pageSizes: [10, 50, 100, 200,],

        }
    },
    methods: {
        getAttraction(id) {
            getAttraction().then(res => {

            })
        },
        sizeChange(data) {
            this.query.pageSize = data
            this.listAttraction()
        },
        // 换页事件
        changePage(data) {
            this.query.pageNum = data
            this.listAttraction()

        },
        _toDetail(data) {
            localStorage.setItem('data', JSON.stringify(data))
            this.$router.push({
                path: '/user/productDetail',
                query: {
                    data: data
                }
            })
        },
        search() {
            this.loading = true
            this.query.categoryId = this.categoryId
            this.query.address = this.address
            this.value = ''
            console.log(this.query.categoryId);

            this.listAttraction()
        },
        listAttraction() {
            this.query.categoryId ? this.query.categoryId : this.query.categoryId = 0

            listAttraction(this.query).then(res => {
                this.total = res.data.total

                const copy = res.data.list.map(item => {

                    return Promise.all([
                        listAttractionImage({ attractionId: item.attractionId }).catch(err => {
                            return null
                        })
                    ]).then(res1 => ({
                        ...item,
                        imgList: res1 ? res1[0].data : []
                    }))
                })

                Promise.all(copy).then(res => {
                    this.attractionList = res
                    console.log(this.attractionList);
                    this.loading = false
                }).catch(err => {
                    log(err)
                })
            })
        },
        change() {

            this.address = ''
            this.query.address = ''
            this.loading = true
            if (!this.value) {
                this.query.categoryId = 0
            } else {

                this.query.categoryId = this.value
                console.log(this.query.categoryId);

            }
            this.listAttraction()
        },
        getCategory() {
            getCategory().then(res => {
                this.options = res.data
            })
        },
    },
    created() {
        this.getCategory()
        this.listAttraction()
    }
}

</script>

<style lang='scss'>
.heat-container {
    margin-top: 50PX;
    display: flex;
    flex-direction: column;
    gap: 100px;
    height: 100vh;

    .active {
        color: rgba($color: #3366FF, $alpha: 1.0) !important;
    }

    .query-body {
        display: flex;
        flex-direction: column;
        width: 1200px;
        margin: 0 auto;

        .content {
            margin-top: 20px;
            gap: 10px;
            display: flex;
            flex-wrap: wrap;
            // height: 700px;
            box-sizing: border-box;
            margin-bottom: 30px;
        }
    }

}
</style>